<template>
  <el-row :gutter="20" style="width: 100%;" class="mt-20">
    <el-col :span="12" v-for="item of iFaceDataArr">
      <el-card class="port-card" shadow="hover">
        <div class="card-title">
          <span>{{ item.ifaceName.toUpperCase() }}</span>
          <span v-permissionShow style="display: flex;align-items: center">
            {{ $t('pageStr.editStr') }}
            <el-icon :size="17" style="cursor: pointer;margin-left: 6px"
                     @click="handleEdit(item)">
              <Edit/>
            </el-icon>
          </span>
        </div>
        <div class="card-content">
          <div class="card-content-left">
            <img style="width: 115px;height: 104px;" src="/icon/netPort.png"/>
          </div>
          <div class="card-content-right">
            <div class="right-row odd-row">
              <div>{{ $t('pageStr.uptimeStr') }}</div>
              <div>
                {{
                  item.day + $t('pageStr.daysStr') + item.hours + $t('pageStr.hoursStr') +
                  item.min + $t('pageStr.minutesStr') + item.sec + $t('pageStr.secondStr')
                }}
              </div>
            </div>
            <div class="right-row">
              <div>{{ $t('pageStr.macStr') }}</div>
              <div>{{ item.ifaceMac }}</div>
            </div>
            <div class="right-row odd-row">
              <div>{{ $t('pageStr.RxStr') }}</div>
              <div>{{ `${item.RxData}(${item.ifaceRxPkt + $t('pageStr.pktsStr')})` }}</div>
            </div>
            <div class="right-row">
              <div>{{ $t('pageStr.TxStr') }}</div>
              <div>{{ `${item.TxData}(${item.ifaceTxPkt + $t('pageStr.pktsStr')})` }}</div>
            </div>
            <div class="right-row odd-row">
              <div>{{ $t('pageStr.IPv4AddressStr') }}</div>
              <div>{{ item.ifaceIP[0]?.ipv4 }}</div>
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <port-dialog v-if="dialogVisible" v-model="dialogVisible" :info-data="dialogData" @success="onSubmit"/>
</template>

<script setup>
import {onBeforeMount, onBeforeUnmount, ref} from 'vue'
import PortDialog from './PortDialog.vue'
import {reqGetIfaceData} from '@/api/network/interface'
import {formatBytes} from "@/utils";

const dialogVisible = ref(false)
const iFaceDataArr = ref([])
const dialogData = ref({})
let timer = null
onBeforeMount(() => {
  getData()
  console.log('接口页面挂载')
  timer = setInterval(getData, 1000 * 5)
})

function getData() {
  reqGetIfaceData().then((res) => {
    console.log('接口信息', res)
    iFaceDataArr.value = res.ifaceOverview
    handleData(iFaceDataArr.value)
  })
}

function handleData(arr) {
  arr.forEach((item) => {
    let runSec = Number(item.ifaceUptime)
    item.day = Math.floor((runSec / (3600 * 24)));
    item.hours = Math.floor((runSec / 3600) % 24);
    item.min = Math.floor((runSec / 60 % 60));
    item.sec = Math.floor((runSec % 60));
    item.RxData = formatBytes(item.ifaceRxByte)
    item.TxData = formatBytes(item.ifaceTxByte)
  })
}


onBeforeUnmount(() => {
  timer && clearInterval(timer)
})

function onSubmit() {

}

function handleEdit(item) {
  dialogData.value = item.ifaceName
  dialogVisible.value = true
  console.log('编辑', dialogData.value)
}
</script>
<style scoped>

.odd-row {
  background-color: #F5F6FA;
}

.right-row {
  font-family: "Microsoft YaHei";
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
}

.right-row div:first-child {
  display: flex;
  color: #717289;
  width: 120px;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.right-row div:nth-child(2) {
  color: #161940;
  display: flex;
  flex: 1;
  justify-content: left;
  align-items: center;
  height: 100%;
}

.card-content-left {
  width: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-content-right {
  flex: 1;
}

.card-content {
  margin-top: 20px;
  display: flex;
}

.port-card {
  margin-bottom: 20px;
  width: 100%;
}

.card-title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 34px;
  background: linear-gradient(90deg, #F5E9DC 0%, rgba(245, 239, 233, 0) 100%);
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
}

.card-title > span {
  font-family: "Microsoft YaHei";
  font-weight: bold;
  font-size: 14px;
  padding-left: 20px;
  color: #161940;
}
</style>